<template>
  <div v-show="impChartData" class="myChart" id="myChart"></div>
</template>

<script>
  import echarts from 'echarts';
  require('echarts/theme/macarons'); // echarts theme
  require('echarts/lib/chart/line');
  // require('echarts/lib/component/tooltip');
  // require('echarts/lib/component/markPoint');
  export default {
    props: {
      impChartData: {
        type: Object
      },
      setChartData: {
        type: Object
      }
    },
    data() {
      return {
        myLineChart: null
      };
    },
    created() {
      this.$nextTick(() => {
        this.myLineChart = echarts.init(document.getElementById('myChart'),'macarons');
        this.drawLine(this.impChartData.xData, this.impChartData.yData, this.setChartData.xAxisColor, this.setChartData.lineColor, this.setChartData.grid);
      });
    },
    watch: {
      'impChartData'() {
        this.$nextTick(() => {
          this.drawLine(this.impChartData.xData, this.impChartData.yData, this.setChartData.xAxisColor, this.setChartData.lineColor, this.setChartData.grid);
        });
      }
    },
    methods: {
      drawLine(xData, yData, xAxisColor, lineColor, grid) {
        this.myLineChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          grid: grid,
          xAxis: [{
            type: 'category',
            data: xData,
            // axisPointer: {
            //   lineStyle: {
            //     color: xAxisColor,
            //     opacity: 0.2,
            //     width: 1
            //   },
            //   label: {
            //     show: true,
            //     backgroundColor: xAxisColor
            //   },
            //   handle: {
            //     show: true,
            //     color: xAxisColor
            //   }
            // }
          }],
          yAxis: [{
            type: 'value',
            name: '份',
            splitNumber: 4
          }],
          series: [{
            name: '总销售量',
            type: 'line',
            smooth: true,
            data: yData,
            markPoint: {
              data: [{
                type: 'max',
                name: '最大值'
              }]
            },
            itemStyle: {
              normal: {
                color: lineColor
              }
            }
          }]
        });
        window.onresize = this.myLineChart.resize;
      }
    }
  }
</script>

<style scoped>
  .myChart {
    width: 100%;
    height: 280px;
  }
</style>
